<template>
	<view class="container">
		<img src="/static/1.jpg" alt="" />
		<view class="headerC" @click="popupShow">
			<view class="mini-img">
				<img src="/static/2.jpg" alt="" />
			</view>
			<text class="header-name">{{nameL}}的直播间</text>
			<view class="follow-btn" :class="{'followed': isFollowing}" @click.stop="toggleFollow">
				<uni-icons v-if="!isFollowing" type="plus-filled" size="20" color="#fff"></uni-icons>
				<text>{{isFollowing ? '已关注' : '关注'}}</text>
			</view>
		</view>
		<view class="headerC-person">
			<uni-icons type="person" size="20" color="#fff"></uni-icons>
			<text>{{num}}万人观看</text>
		</view>

		<!-- 底部弹窗 -->
		<uni-popup class="bottom-popup" ref="infoPopup" type="bottom" :mask-click="true" :safe-area="true">
			<view class="info-popup">
				<view class="info-header">
					<view class="header-img">
						<img src="/static/2.jpg" alt="">
					</view>
					<view class="header-center">
						<view class="name">
							<p>唠叨的叨叨叨</p>
						</view>
						<view class="btn">
							<view class="popup-follow-btn" :class="{'popfollowed': isFollowing}" @click="handleClick">
								<uni-icons v-if="!isFollowing" type="auth" size="20" color="#fff"></uni-icons>
								<img v-if="isFollowing" src="/static/customer.png" alt="">
								<text>{{isFollowing ? '客服' : '关注'}}</text>
							</view>
						</view>
					</view>
					<view class="header-right">
						<view class="img-customer">
							<img v-if="!isFollowing" src="/static/customer.png" alt="" @click="addCusService">
							<uni-icons v-if="isFollowing" type="auth" size="18" @click="followFn"></uni-icons>
						</view>
						<view class="img-report" @click="reportFn">
							<img src="/static/report.png" alt="">
						</view>
					</view>
				</view>
				<view class="info-lineBox">
					<view class="info-line"></view>
				</view>
				<view class="info-content">
					<p class="info-title">互联网健康的普及</p>
					<p class="info-detail">
						互联网健康直播，让权威医生来到你身边！实时获取专业科普、疾病预防和保健知识，在线答疑解惑。足不出户，轻松学习，便捷互动。是您获取可靠健康信息、进行初步咨询的智能新选择！
					</p>
				</view>
			</view>
		</uni-popup>

		<!-- 举报弹窗 -->
		<uni-popup ref="reportPopup" type="bottom" :mask-click="true" :safe-area="true">
			<view class="reportContainer">
				<view class="title">
					<view></view>
					<view class="report">举报</view>
					<view class="sure">提交</view>
				</view>
				<view class="line-box">
					<view class="line"></view>
				</view>
				<view class="content">
					<uni-data-checkbox mode="tag" multiple v-model="checkboxArr" :localdata="reportList"
						@change="onChange" selectedColor="#E8EEF9" selectedTextColor="#2D7AF7">
					</uni-data-checkbox>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
	import uniDataCheckbox from '@dcloudio/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue'

	export default {
		components: {
			uniPopup,
			uniDataCheckbox
		},
		data() {
			return {
				nameL: '刘唯',
				num: '2.2',
				isFollowing: false,
				reportList: [{
						value: 1,
						text: '违法围禁'
					},
					{
						value: 2,
						text: '色情低俗'
					},
					{
						value: 3,
						text: '诈骗'
					},
				],
				checkboxArr: []
			}
		},
		mounted() {
			// const data = []
			// this.reportList.forEach(item => {
			// 	data.push({
			// 		'id': item.value,
			// 		'name': item.text
			// 	})
			// })
			// console.log(data, 'data')

		},
		methods: {
			handleClick() {
				this.isFollowing === false ? this.toggleFollow() : this.addCusService();
			},
			// 主内容弹窗
			popupShow() {
				this.$refs.infoPopup.open();
			},
			// 举报弹窗
			reportFn() {
				this.$refs.infoPopup.close();
				this.$refs.reportPopup.open();
			},
			toggleFollow() {
				this.isFollowing = !this.isFollowing;
				uni.showToast({
					title: this.isFollowing ? '关注成功' : '已取消关注',
					icon: 'none'
				});
			},
			followFn() {
				uni.showModal({
					title: '提示',
					content: '确定不再关注此人？',
					success: (res) => {
						if (res.confirm) {
							this.isFollowing = false;
						}
					}
				})
			},
			addCusService() {
				uni.navigateTo({
					url: '/pages/contactCusService/contactCusService'
				});
			},
			onChange(e) {
				console.log('当前选中：', e.detail.value);
				this.checkboxArr = e.detail.value;
			}


		}
	}
</script>

<style lang="scss" scoped>
	.container {
		img {
			height: 100vh;
			width: 100vw;
		}

		.headerC {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 16px;
			left: 30rpx;

			.mini-img {
				width: 52rpx;
				height: 52rpx;

				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					object-fit: cover;
				}
			}

			.header-name {
				color: #fff;
				padding: 0rpx 22rpx 0rpx 10rpx;
			}

			.follow-btn {
				width: 110rpx;
				padding: 8rpx 20rpx;
				background-color: #1E90FF;
				border-radius: 30rpx;
				color: white;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				white-space: nowrap;
				justify-content: center;
			}

			.follow-btn.followed {
				background-color: white;
				color: #666;
				border: 1rpx solid #ddd;
			}
		}

		.headerC-person {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 56px;
			left: 86rpx;

			text {
				color: #fff;
				padding-left: 6px;
			}
		}

		.bottom-popup {
			position: fixed;
			bottom: 0px;

			.info-popup {
				width: 100%;
				min-height: 300px;
				background-color: #fff;
				border-top-left-radius: 26px;
				border-top-right-radius: 26px;

				.info-header {
					padding: 30rpx;
					// border-bottom: 1rpx solid #EEEEEE;
					display: flex;
					justify-content: space-between;

					.header-img {
						width: 128rpx;
						height: 128rpx;

						img {
							width: 100%;
							height: 100%;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							object-fit: cover;
						}
					}

					.header-center {
						// padding-left: 30rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 356rpx;

						.name {
							font-weight: 600;
							font-size: 32rpx;
							color: #333333;
						}

						.btn {
							// padding-top: 26rpx;

							.popup-follow-btn {
								// width: 200rpx;
								// padding: 8rpx 20rpx;
								background-color: #1E90FF;
								border-radius: 20rpx;
								color: white;
								display: flex;
								align-items: center;
								font-size: 24rpx;
								white-space: nowrap;
								justify-content: center;
								height: 68rpx;

								img {
									width: 16px;
									height: 16px;
									padding-right: 4rpx;
								}
							}

							.popup-follow-btn.popfollowed {
								background-color: white;
								color: #666;
								border: 1rpx solid #ddd;
							}
						}
					}

					.header-right {
						display: flex;
						// justify-content: center;
						// align-items: center;
						// margin-top: 38px;
						// margin-left: 18px;
						align-items: end;
						width: 156rpx;
						justify-content: space-between;

						img {
							width: 16px;
							height: 16px;

						}

						.img-customer,
						.img-report {
							width: 68rpx;
							height: 68rpx;
							background: #FFFFFF;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							border: 1rpx solid rgba(121, 135, 158, 0.5);
							// margin-right: 20rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}

				.info-lineBox {
					padding: 0 30rpx;

					.info-line {
						width: 100%;
						height: 0rpx;
						border: 1rpx solid #EEEEEE;
					}
				}


				.info-content {
					padding: 30rpx 0rpx 0rpx 30rpx;

					.info-title {
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
					}

					.info-detail {
						font-size: 24rpx;
						color: #999999;
						padding: 20px 30px 20px 0px;
					}
				}

			}
		}

		.reportContainer {
			position: fixed;
			bottom: 0px;
			width: 100%;
			min-height: 200px;
			background-color: #fff;
			border-top-left-radius: 26px;
			border-top-right-radius: 26px;

			.title {
				width: 96%;
				display: flex;
				justify-content: space-between;
				margin-top: 32rpx;
				padding-bottom: 32rpx;

				.report {
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
				}

				.sure {
					font-weight: 600;
					font-size: 32rpx;
					color: #2D7AF7;
				}
			}

			.line-box {
				padding: 0 30rpx;

				.line {
					width: 100%;
					height: 0rpx;
					border: 1rpx solid #EEEEEE;
				}
			}

			.content {
				margin: 30rpx;
				display: flex;

				.detailSquare {
					background: #EEEEEE;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					color: #666666;
					padding: 8rpx 18rpx;
					display: inline;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>